<template>
  <view>
    <u-mask :show="show" @click.stop="_close" :zoom="false">
      <swiper
        @click.stop
        style="height: calc(456rpx + 500rpx)"
        class="maskBody"
        :duration="500"
        :next-margin="goodsLength === 1 ? '0rpx' : '160rpx'"
        :current="current"
        @change="goodsChange"
      >
        <swiper-item
          v-for="(goods, index) in goodsList"
          :key="index"
          style="box-sizing: border-box"
          :class="goodsLength === 1 ? 'u-p-l-24 u-p-r-24' : 'u-p-l-24'"
        >
          <view class="itemBox">
            <!-- 商品 -->
            <view class="goodsForBox" @click.stop="_goGoodsPage(goods)">
              <view class="goodsImage">
                <!-- 下架 -->
                <view v-if="goods.status === 2" class="goodsMask">- 已下架 -</view>
                <!-- 售罄 -->
                <view v-else-if="goods.quantity === 0" class="goodsMask">- 已卖完 -</view>
                <!-- 结束 -->
                <!-- <view v-else-if="domloading && !goodsEndTiem" class="goodsMask">- 已结束 -</view> -->
                <!-- 正常 -->
                <!-- <view v-else class="times">{{goodsEndTiem}}</view> -->
                <image
                   mode="aspectFill"
                  :src="goods.mainImage"
                  class="images"
                ></image>
              </view>
              <view class="goodsMsg">
                <view class="goodsName fz-12">{{ goods.goodsName }}</view>
                <view class="u-p-t-8" v-if="goods.helpSellStatus==1"><text class="goodsMoney">帮卖赚{{goods.exclusiveAmount || 0}}元</text></view>
                <view class="u-p-t-8" v-if="goods.helpSellStatus==2"><text class="goodsMoney">赚{{goods.exclusiveAmount || 0}}元</text></view>
                <view style="flex:1;"></view>
                <!-- 存在市场价 -->
                <view class="priceBox u-p-t-8" v-if="goods.marketPrice">
                  <view class="justify-center">
                    <view class="topPrice"><text class="fz-10">￥</text>{{goods.minSalePrice}}</view>
                  </view>
                  <image class="goodsPice_img" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/goodsPice.png" mode="widthFix" />
                  <view class="justify-between posab fz-10 viceColor">
                    <view>￥{{goods.marketPrice}}</view>
                    <view>即将恢复</view>
                  </view>
                </view>
                <!-- 不存在市场价，只展示最低价 -->
                <view class="priceBox u-p-t-8 u-p-b-20" v-else>
                  <view class="themeFontColor fz-16">
                    <text class="fz-12">￥</text>{{goods.minSalePrice}}
                  </view>
                </view>
              </view>
            </view>
            <!-- 购买记录 -->
            <view class="goodsShopBox">
              <view class="linh-30">跟团记录</view>
              <!-- 最多展示六行 -->
              <view style="padding: 10rpx 0rpx;height:500rpx;">
                <DefaultPage type="4" tips="一大波人正在赶来" v-if="loadLogin && !shopList[index].records.length" />
                <scroll-view scroll-y style="height: 100%;" :lower-threshold="100" @scrolltolower="scrolltolower" v-if="loadLogin && shopList[index].records.length">
                  <view v-for="(shop, idx) in shopList[index].records" :key="idx" class="linh-40 shopForBox fz-12">
                    <view class="shopName">
                      <view class="viceColor" style="min-width:50rpx;">{{shop.followGroupNum}}</view>
                      <view class="u-m-l-20 headBox1">
                        <image :src="shop.avatar" mode="aspectFill" style="width:100%;height:100%;display: block;"/>
                      </view>
                      <view class="u-m-l-20 u-m-r-20">{{shop.nickname}}</view>
                      <view class="viceColor u-p-r-20 skuContent">
                        <text class="skuName">{{shop.skuName}}</text>
                        <text>*{{shop.count}}</text>
                      </view>
                    </view>
                    <view class="viceColor">{{showTimeFn(shop.buyTime)}}</view>
                  </view>
                </scroll-view>
                <!-- <ScrollList :ref="'scrollView'+index" noTop @scrolltolower="scrolltolower" v-if="loadLogin && shopList[index].records.length">
                  <template slot="content">
                    <view v-for="(shop, idx) in shopList[index].records" :key="idx" class="linh-40 shopForBox fz-12">
                      <view class="shopName">
                        <view class="viceColor">{{shop.followGroupNum}}</view>
                        <view class="u-m-l-20 headBox1">
                          <image :src="shop.avatar" mode="aspectFill" style="width:100%;height:100%;display: block;"/>
                        </view>
                        <view class="u-m-l-20 u-m-r-20">{{shop.nickname}}</view>
                        <view class="viceColor u-p-r-20 skuContent">
                          <text class="skuName">{{shop.skuName}}</text>
                          <text>*{{shop.count}}</text>
                        </view>
                      </view>
                      <view class="viceColor">{{showTimeFn(shop.buyTime)}}</view>
                    </view>
                  </template>
                </ScrollList> -->
              </view>
            </view>
            <!-- 立即购买 -->
            <button class="buttonStyleNone bombtn themeBgColor" :disabled="goods.status === 2 || goods.quantity === 0" @click.stop="buyNowFn(goods)">立即购买</button>
           </view>
        </swiper-item>
      </swiper>
    </u-mask>
    <!-- 确定订单 -->
    <!-- :goodsEndTiem="goodsEndTiem" -->
    <ConfigOrder
      :show="configOrderShow"
      :videoItem="item"
      :goodsSpu="goodsSpuId"
      :shopWindowId="shopWindowId"
      @close="closeConfigOrderFn"
      @paySuccessFn="paySuccessFn"
    />
    <PaySuccess
      :show="paySuccessType"
      :orderDetailsData="orderDetailsData"
      :item="item"
      @connectionFn="connectionFn"
      @goToOrderDetailsFn="goToOrderDetailsFn"
      @closePaySuccessFn="closePaySuccessFn"
    />
  </view>
</template>

<script>
import dynamic from "@/api/dynamic.js";
import ScrollList from "@/components/scrollList/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import Util from "@/api/util.js";
import ConfigOrder from "./configOrder.vue";
import PaySuccess from "./paySuccess.vue";  // 支付成功
import orderApi from "@/api/orderApi.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: {}
    },
    goodsList: {
      type: Array,
      default: [],
    },
    goodsCurrent: {
      type: Number,
      default: 0,
    },
    dynamicId: {
      type: Number|String,
      default: ''
    },
    // 结束时间
    // goodsEndTiem: {
    //   type: String,
    //   default: ''
    // },
    // 跳转商品详情，带入结束时间
    // endTiem: {
    //   type: String,
    //   default: ''
    // }
  },
  components: {
    ScrollList,
    ConfigOrder,
    PaySuccess,
    DefaultPage
  },
  computed: {
    goodsLength() {
      return this.goodsList.length;
    },
  },
  watch: {
    show(nVal){
      if(nVal){
        this.current = this.goodsCurrent;
        this.getShopList()

        setTimeout(() => {
          this.domloading = true
        }, 1000);
      }else{
        this.shopList = []
        this.orderDetailsData = []
        this.loadLogin = false
      }
    }
  },
  data() {
    return {
      current: 0,
      shopList: [],
      loadLogin: false, // 是否首次加载完成
      configOrderShow: false, // 确定订单购买
      goodsSpuId: '', // 购买spuID
      shopWindowId: '', //  购买商品的橱窗ID
      paySuccessType: false, // 支付成功弹窗
      orderDetailsData: {}, // 支付成功订单详情
      domloading: false
    };
  },
  methods: {
    // 订单支付成功
    paySuccessFn (e) {
      orderApi.myBuyOrderListDetails({orderAllId:e}).then(res => {
        if (res.code == 200) {
          console.log(res.data,'当订单详情')
          this.orderDetailsData = res.data
          this.paySuccessType = true
        }
      })
    },
    closePaySuccessFn () {
      console.log('0000')
      this.paySuccessType = false
    },
    // 订单详情
    goToOrderDetailsFn () {
      this.paySuccessType = false
      this.navigateTo({ url: `/pagesA/order/myOrderDetails?orderAllId=${this.orderDetailsData.orderAllId}` })
    },
    // 联系团长
    connectionFn () {
      if(this.$store.state.imUserInfo.imId === this.orderDetailsData.groupAccountId){
        return uni.showToast({
          title: '请勿联系自己',
          icon: 'none'
        })
      }
      this.paySuccessType = false
      this.navigateTo({url: '/pagesB/message/messageDetails?id='+this.item.accountId})
    },
    buyNowFn (item) {
      if(!this.isLogin){
        this.navigateTo({ url: '/pagesB/login/index'})
        return
      }
      this.goodsSpuId = item.spuId
      this.shopWindowId = item.shopWindowId
      this.configOrderShow = true
      this._close()
    },
    closeConfigOrderFn () {
      this.configOrderShow = false
    },
    goodsChange(e) {
      this.current = e.detail.current;
    },
    // 首次获取团购记录
    async getShopList(){
      for (let i = 0; i < this.goodsList.length; i++) {
        this.shopList.push({
          currentPage: 1,
          pageSize: 10,
          spuId: this.goodsList[i].spuId,
          records: [],
          finish: false
        })
        let params = JSON.parse(JSON.stringify(this.shopList[i]))
        if(params && params.records){delete params.records}
        const { data } = await dynamic.getBuyLog(params)
        this.shopList[i].records = data.records  // 跟团记录
        // 是否加载完毕
        this.shopList[i].finish = (this.shopList[i].currentPage * this.shopList[i].pageSize) !== this.shopList[i].records.length
      }
      this.loadLogin = true
    },
    // 加载更多团购记录
    async scrolltolower(){
      const i = this.current
      if(this.shopList[i].finish) return
      this.shopList[i].currentPage++
      let params = JSON.parse(JSON.stringify(this.shopList[i]))
      if(params && params.records){delete params.records}
      const { data } = await dynamic.getBuyLog(params)
      this.shopList[i].records.push(...data.records)  // 跟团记录
      this.shopList[i].finish = (this.shopList[i].currentPage * this.shopList[i].pageSize) !== this.shopList[i].records.length
      // this.$refs[`scrollView${i}`][0].loadFinish(this.shopList[i].finish ? 3 : 0) // 加载完成
    },
    _close() {
      this.$emit("close");
    },
    showTimeFn(tiem){
      return Util.showTime(tiem,1)
    },
    _goGoodsPage(goods){
      if(goods.status === 2) return
      this.navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${goods.shopWindowId}&dynamicId=${this.item.dynamicId}`})
    }
  },
};
</script>
<style lang="scss" scoped>
.maskBody {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 99;
  padding-top: 32rpx;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .itemBox {
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 24rpx;
    border-radius: 12rpx;
    background-color: #fff;
    height: auto !important;
  }
  .goodsForBox {
    flex-shrink: 0;
    display: flex;
    height: 220rpx;
    .goodsImage {
      width: 200rpx;
      height: 200rpx;
      display: block;
      border-radius: 12rpx;
      margin-right: 24rpx;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      .goodsMask{
        position: absolute;
        width: 100%;
        line-height: 200rpx;
        text-align: center;
        left: 0;
        top:0;
        background: rgba(0,0,0,0.7);
        font-size: 20rpx;
        color: #FFF;
      }
      .images {
        width: 100%;
        height: 100%;
      }
      .times {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: center;
        font-size: 20rpx;
        background: rgba(0, 0, 0, 0.4);
        line-height: 40rpx;
        color: #FFF;
      }
    }
    .goodsMsg {
      display: flex;
      flex: 1;
      flex-direction: column;
      .goodsName {
        @include bov(2);
        flex-shrink: 0;
      }
      .goodsMoney{
        background: linear-gradient(90deg, #FDEDC7 0.12%, #FEDFA6 100%);
        border-radius: 4rpx;
        font-size: 20rpx;
        color: #ED6A0C;
        padding: 0 8rpx;
      }
      .priceBox{
        position: relative;
        width: 240rpx;
        .posab{
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;
        }
        .goodsPice_img {
          width: 100%;
          height: 64rpx;
        }
        .topPrice{
          margin: 0 auto;
          background-color: #E44435;
          color: #FFF;
          padding: 4rpx 10rpx;
          border-radius: 40rpx;
          position: relative;
          top: 6rpx;
          z-index: 9;
        }
      }
    }
  }
  .goodsShopBox {
    padding: 20rpx 8rpx;
    .shopForBox{
      display: flex;
      align-items: center;
      .shopName {
        display: flex;
        align-items: center;
        flex:1
      }
    }
    .headBox1{
      width:48rpx;
      height:48rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .ov1{
      @include toe();
    }
  }
  .bombtn{
    margin: 0 8rpx;
    color: #FFF;
    line-height: 88rpx;
    border-radius: 88rpx;
    padding: 0;
    font-size: 32rpx;
  }
  .skuContent {
    display: flex;
    flex: 1;
  }
  .skuName {
    max-width: calc(100% - 60rpx);
    @include bov(1)
  }
}
</style>